$(function() {
	$(".wheel li:eq(0)").css("backgroundPositionX", "-20px");
	//将第一个li的背景颜色设为红色
	wheelShow();
	//执行轮播方法
	$(".wheel li").click(imgClick);
	$(".note").click(noteClick);
	$(".rech").click(rechClick);
});
var x = 0,
	i = 0,
	j = 1,
	i2, j2;
//x:移动坐标;i:当前图片;j:下一张图片;i2,j2:点击后需要用到的下标
var timeId1; //timeId1:自动运行的定时器
var isAuto = true,
	isRun = true; //isAuto为true时,自动轮播;false时,用户点击了li;isRun:判断是否正在运行
function wheelShow() {
	var lis = $(".wheel li") //获取所有li (4个)
	if (x >= 20) {
		//如果x大于li的宽度(18)则赋值为0
		x = 0;
		isRun = true;
		$(".wheel li").css("backgroundPositionX", "-40px");
		//把所有的li的精灵图变为灰色
		if (isAuto) {
			$(lis[j]).css("backgroundPositionX", "-20px");
			//正在运行的精灵图变为红色
			i = i + 1 >= 4 ? 0 : i + 1;
			j = j + 1 >= 4 ? 0 : j + 1;
			//给i和j重新赋值
		} else {
			$(lis[j2]).css("backgroundPositionX", "-20px");
			//当前li的精灵图变为红色
		}
	}
	if (isAuto) {
		imgChange(x, i, j, lis); //轮播左移
	} else {
		imgChange(x, i2, j2, lis); //执行轮播方法
	}
	x++; //坐标增加
	if (x < 20) {
		timeId1 = setTimeout("wheelShow()", 50);
	} else {
		if (!isAuto) {
			x = 0;
			i = j2;
			j = i + 1 >= 4 ? 0 : i + 1;
		}
		timeId1 = setTimeout("wheelShow()", 3000);
		isRun = false;
		if (isAuto) {

			imgExchange(j); //交换两个img的src
		} else {
			imgExchange(j2); //交换两个img的src
			isAuto = true;
		}
	}
}

function imgChange(x, i_1, j_1, lis) {
	$(".imgCup").css("left", -(x * 26) + "px");
	//将轮播图左移
	$(lis[i_1]).css("backgroundPositionX", (x - 20) + "px");
	$(lis[j_1]).css("backgroundPositionX", (x - 40) + "px");
	//li精灵图右移
}

function imgExchange(a) {
	//更改两个img的src属性
	$(".imgCup").css("left", "0px");
	//将轮播图的坐标归零
	var imgs = $(".imgCup img");
	//获得轮播框中所有img元素
	var path_1 = $(imgs[1]).attr("src");
	//获得第二个img的src
	$(imgs[0]).attr("src", path_1);
	//将第二个img的src赋值给第一个img的src
	var path_2 = path_1.replace((a + 1) + "", (a + 2 >= 5 ? 1 : a + 2) + "");
	//把第二个img的src中的图片编号替换为下一张图片的编号,如果越界则赋值为1
	$(imgs[1]).attr("src", path_2);
	//把生成的新路径赋值给第二个img的src属性
}

function imgClick() {
	var sel_i = parseInt($(this).text()) - 1; //获得当前选择值-1,即下标
	var now_j = j; //获得正在运行值
	if (now_j != sel_i) {
		//如果当前值与正在运行值不相等,才执行轮播效果
		clearTimeout(timeId1);
		//清除自动轮播效果
		isAuto = false;
		var imgs = $(".imgCup img");
		//获得轮播框中所有img元素
		var path_1 = $(imgs[1]).attr("src");
		var newInd = sel_i + 1 >= 5 ? 1 : sel_i + 1;
		//根据选择的li的下标来确定轮播的图片
		var path_2 = path_1.substring(0, 11) + newInd + path_1.substring(12);
		//获得新的路径
		$(imgs[1]).attr("src", path_2);
		//把新路径赋值给后一个img属性
		if (isRun) {
			i2 = now_j;
		} else {
			i2 = now_j - 1; 
		}
		j2 = sel_i;
		//赋值新的轮播下标
		x = 20;
		wheelShow();
		//执行第二个轮播方法
	}
}

function noteClick() {
	$(".phone").css("backgroundPosition", "-745px -439px").css("height", "210px");
}

function rechClick() {
	$(".phone").css("backgroundPosition", "-211px -11px").css("height", "190px");

}
